@import "./header.less";
@import "./animate.less";
@import "./icomoon.less";
@import "./owl.theme.default.min.less";
@import "./owl.carousel.min.less";
@import "./simple-line-icons.less";
#fh5co-home {
  	background-color: transparent;
  	background-size: cover;
  	background-attachment: fixed;
  	position: relative;
  	width: 100%;
  	height: 900px;
  	color: #fff;
  	.text-wrap {
	    height: 900px;
	    display: table;
  		width: 100%;
  		position: relative;
  		z-index: 4;
	}
	.text-inner {
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		h1 {
		  	font-size: 38px;
		  	text-transform: uppercase;
		  	color: white;
		  	margin: 0 0 20px 0;
		  	font-weight: 700;
		}
		h2 {
		  	font-size: 20px;
		  	line-height: 30px;
		  	padding-top:30px;
		  	font-weight: 300;
		  	color: rgba(255, 255, 255, 0.8);
		  	margin: 0 0 30px 0;
		}
		.call-to-action {
		  	display: block;
		  	width: 100%;
		  	a {
			 	width: 230px;
			  	display: inline-block;
			  	font-size: 20px;
			  	padding: 15px 0;
			  	-webkit-border-radius: 4px;
			  	-moz-border-radius: 4px;
			  	-ms-border-radius: 4px;
			  	border-radius: 4px;
			  	margin-right: 10px;
			  	-webkit-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
			  	-moz-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
			  	-ms-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
			  	-o-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
			  	box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
			}
			a.demo {
			  	border: 2px solid #fff;
			  	text-decoration: none !important;
			  	&:hover {
				  	background: rgba(255, 255, 255, 0.2);
				}
			}
			a.download {
			  	border: 2px solid #ff3b30;
			  	background: #ff3b30;
			  	text-decoration: none !important;
			}
		}
	}
    a{
	  	color: rgba(255, 255, 255, 0.8) !important;
	  	text-decoration: underline;
	  	&:hover {
		  	color: #fff;
		  	text-decoration: none;
		}
	}
	.gradient {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 2;
	}
	@media (min-width: 1260px) {
		height: 600px;
		.text-wrap {
			height: 600px;
		}
	}
	@media (min-width: 1360px) {
		height: 640px;
		.text-wrap {
			height: 640px;
		}
	}
	@media (min-width: 1400px) {
		height: 675px;
		.text-wrap {
			height: 675px;
		}
	}
  	@media (min-width: 1660px) {
		height: 788px;
		.text-wrap {
			height: 768px;
		}
	}
  	@media (min-width: 1920px) {
		height: 900px;
		.text-wrap {
			height: 900px;
		}
	}
}

.fh5co-explore-bg-color {
  width: 100%;
  background: #f1f1f1;
  background: url("../images/bg.png") repeat;
  padding: 40px 0;
  margin-bottom: 0;
}


#fh5co-testimony{
	.wrap-testimony {
	  	position: relative;
	  	width: 100%;
	  	.testimony-slide {
		  	text-align: center;
		  	span{
		  		font-size: 12px;
  				text-transform: uppercase;
				letter-spacing: 2px;
				font-weight: 700;
				a.twitter {
				  	color: #1fb5f6;
				  	font-weight: 300;
				}
		  	}
		  	figure {
			  	margin-bottom: 20px;
			  	display: -moz-inline-stack;
			  	display: inline-block;
			  	zoom: 1;
			  	*display: inline;
			  	img {
				  	width: 90px;
				  	-webkit-border-radius: 50%;
				  	-moz-border-radius: 50%;
				  	-ms-border-radius: 50%;
				  	border-radius: 50%;
				}
			}
			blockquote {
			  	border: none;
			  	margin: 0 auto;
			  	width: 72%;
			  	position: relative;
			  	padding-bottom: 30px;
			  	margin-bottom: 30px;
			  	p {
				  	font-style: italic;
				  	color: #8f989f;
				  	font-size: 20px;
				  	line-height: 1.6em;
				}
			}
		}
		.wrap-testimony.active {
		  	display: block;
		}
		.arrow-thumb {
		  	position: absolute;
		  	top: 40%;
		  	display: block;
		  	width: 100%;
		  	a {
			  	font-size: 32px;
			  	color: #dadada;
			  	&:hover{
			  		text-decoration: none;
			  	}
			  	&:focus{
			  		text-decoration: none;
			  	}
			  	&:active{
			  		text-decoration: none;
			  	}
			}
		}
	}
}
.getting-started {
  	background: #1fb5f6;
  	padding: 60px 0 40px 0;
  	h3{
		color: #fff;
  	}
  	p{
  		color: rgba(255, 255, 255, 0.8);
  	}
  	.call-to-action {
		display: block;
		width: 100%;
		float: left;
		a.sign-up {
		  	float: right;
		  	margin-top: 20px;
		  	padding: 18px 60px;
		  	background: #ea574c;
		  	color: #fff;
		  	-webkit-border-radius: 4px;
		  	-moz-border-radius: 4px;
		  	-ms-border-radius: 4px;
		  	border-radius: 4px;
		  	-webkit-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
		  	-moz-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
		 	-ms-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
		  	-o-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
		  	box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.19);
		  	&:hover{
			  		text-decoration: none;
			  		background: #393e46;
			  	}
			  	&:focus{
			  		text-decoration: none;
			  	}
			  	&:active{
			  		text-decoration: none;
			  	}
		}
	}
}
.section-heading {
  	float: left;
  	width: 100%;
  	padding-bottom: 50px;
  	margin-bottom: 0px;
  	clear: both;
  	h2 {
	 	 margin: 0 0 0 0;
	  	font-size: 40px;
	  	font-weight: 400;
	  	color: #333;
	  	position: relative;
	  	display: block;
	 	 padding-bottom: 10px;
	  	line-height: 1.5;
	  	margin-bottom: 20px;
	  	&:after{
			content: "";
			position: absolute;
			display: block;
			width: 80px;
			height: 3px;
			background: #1fb5f6;
			left: 50%;
			margin-left: -25px;
			bottom: 0;
	  	}
	}
	h3 {
	  	font-size: 18px;
	  	font-weight: 400;
	  	height: 25px;
	  	line-height: 25px;
	  	margin-bottom: 0px;
	  	// line-height: 1;
	  	color: #8f989f;
	 	 position: relative;
	  	display: block;
	  	// padding-bottom: 30px;
	}
}
.owl-carousel{
	.owl-controls{
		.owl-dot{
			display: inline-block;
			zoom:1;
			span{
				width: 10px;
				height: 10px;
				margin:5px 7px;
				display: block;
				border-radius: 30px;
				background: #c2edfc;
				&:hover{
					background: #cccccc;
				}
				&:focus{
					background: #cccccc;
				}
			}
			&:hover{
				span{
					background: #cccccc;
				}
			}
			&:focus{
				span{
					background: #cccccc;
				}
			}
		}
		.owl-dot.active{
			span{
			 	background: #35c5f4;
			}
		}
	}
}

.fh5co-pricing {
  	padding: 3em 0 0em 0;
	.pricing {
	  	display: block;
	  	float: left;
	  	margin-bottom: 30px;
	  	.price-box {
			text-align: center;
			padding: 18px;
			background: #fff;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			-ms-border-radius: 5px;
			border-radius: 5px;
			margin-bottom: 40px;
			position: relative;
			border-top:1px solid rgba(0, 0, 0, 0.19);
			-webkit-box-shadow: 0px 2px 10px -1px rgba(0, 0, 0, 0.19);
			-moz-box-shadow: 0px 2px 10px -1px rgba(0, 0, 0, 0.19);
			-ms-box-shadow: 0px 2px 10px -1px rgba(0, 0, 0, 0.19);
			-o-box-shadow: 0px 2px 10px -1px rgba(0, 0, 0, 0.19);
			box-shadow: 0px 2px 10px -1px rgba(0, 0, 0, 0.19);
			.btn-select-plan {
			  	padding: 10px 20px;
			  	background: #1fb5f6;
			  	color: #fff;
			  	-webkit-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.15);
			  	-moz-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.15);
			  	-ms-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.15);
			  	-o-box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.15);
			  	box-shadow: 0px 3px 6px -1px rgba(0, 0, 0, 0.15);
			}
		}
		.popular{
			.btn-select-plan {
			  	background: #ff3b30;
			}
		}
	}
	.pricing-plan {
	  	margin: 0 0 50px 0;
	  	padding: 0;
	  	font-size: 13px;
	  	letter-spacing: 2px;
	  	text-transform: uppercase;
	  	font-weight: 700;
	  	color: #888f94;
	  	span {
		  	display: block;
		  	margin-top: 10px;
		  	margin-bottom: 0;
		  	color: #d5d8db;
		}
	}
	.pricing-plan-offer {
  		margin-bottom: 24px;
	}
	.price {
	  	font-size: 72px;
	  	color: #6d6d6d;
	  	line-height: 50px;
	  	.currency {
		  	font-size: 30px;
		  	top: 0.1em;
		  	padding-right: 10px;
		}
		small {
		  	font-size: 20px;
		  	color: rgb( 51, 51, 51 );
		  	line-height: 90px;
		  	display: block;
		  	text-transform: uppercase;
		}
		p{
		  	text-align: left;
		}
	}
}
#fh5co-testimony, #fh5co-explore{
  padding: 3em 0;
}
#fh5co-work, #fh5co-counters {
  padding: 7em 0;
}
.fh5co-explore {
  padding-bottom: 0px;
}
.logo_center {
  width: 420px;
  height: 230px;
  margin: 0 auto;
  background: url("../images/icon.png") -310px -46px no-repeat;
}
.btn {
  	text-transform: uppercase;
  	letter-spacing: 2px;
  	-webkit-transition: 0.3s;
  	-o-transition: 0.3s;
  	transition: 0.3s;
  	&:hover{
  		background: #393e46 !important;
  		color: #fff;
  		outline: none !important;
  	}
  	&:active{
  		background: #393e46 !important;
  		color: #fff;
  		outline: none !important;
  	}
  	&:focus{
  		background: #393e46 !important;
  		color: #fff;
  		outline: none !important;
  	}
}
.btn-primary {
  	background: #ff3b30;
  	color: #fff;
  	border: none !important;
  	border: 2px solid transparent !important;
  	&:hover{
  		box-shadow: none;
  		background: #ff3b30;
  	}
  	&:active{
  		box-shadow: none;
  		background: #ff3b30;
  	}
  	&:focus{
  		box-shadow: none;
  		background: #ff3b30;
  	}
}
.js{
	.to-animate{
		opacity: 0;
	}
	.to-animate2{
		opacity: 0;
	}
	.to-animate3{
		opacity: 0;
	}
	.single-animate{
		opacity: 0;
	}
}
.row-bottom-padded-lg {
  padding-bottom: 7em;
}
.row-bottom-padded-md {
  padding-bottom: 4em;
}
.row-bottom-padded-sm {
  padding-bottom: 2em;
}
.fh5co-animated {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.user-pingjia{
  width: 660px;
  height: 38px;
  margin:0 auto;
  text-align: center;
}
.user-pj{
  font-size: 40px;
  text-align: center;
  color: rgb( 0, 0, 0 );
}
.user-span span{
  float: left;
  text-align: center;
}
.user-span span.user-span{
  content: "";
  display: block;

  width: 150px;
  height: 2px;
  background: #1fb5f6;
  margin:17px 60px;
}


ul.topic {
	margin: 0 auto;
	li{
		display: block;
  		float: left;
  		font-size: 20px;
  		&:first-child {
		  	border: none;
		  	span {
			  	display: none;
			}
		}
  		span{
  			width: 1px;
			height: 23px;
			margin: 4px 21px;
			display: block;
			background: #fff;
			float: left;
  		}
	}
}

.pricing-plan span{
  width: 150px;
  height: 22px;
  margin:0 auto;
  background: url("../images/icon.png") -2px -319px no-repeat;
}
